<template>
    <div class="main clearfix">
        <!--资料卡-->
        <div class="data-card clearfix">
            <img v-lazy="'./images/portrait1.jpg'" class="card-portrait" />
            <ul class="message">
                <li class="clearfix">
                    <div class="label">用户名：</div>
                    <div class="content card-name">{{userInfo.userName}}</div>
                </li>
                <li class="clearfix">
                    <div class="label">ID:</div>
                    <div class="content card-id">{{ userInfo.accountId }}</div>
                </li>
                <li class="clearfix">
                    <div class="label">性别：</div>
                    <div class="content card-sex">{{userInfo.gender}}</div>
                </li>
                <li class="clearfix">
                    <div class="label">年龄：</div>
                    <div class="content card-age">{{ userInfo.age }}</div>
                </li>
                <li class="clearfix">
                    <div class="label">邮箱：</div>
                    <div class="content card-region">2694382488@qq.com</div>
                </li>
                <li class="clearfix">
                    <div class="label">地区：</div>
                    <div class="content card-region">{{ userInfo.address }}</div>
                </li>
                <li class="clearfix">
                    <div class="label">个性签名：</div>
                    <div class="content card-signature">{{ userInfo.signature }}</div>
                </li>
            </ul>
        </div>

        <!--最近动态-->
        <div class="dynamic-wrapper clearfix">
            <div class="head-tape clearfix">
                <div class="dynamic">
                    <i class="iconfont icon-dongtai"></i><span>最近动态</span>
                </div>
                <a class="link">
                    <span>查看更多</span>
                    <i class="iconfont icon-jiantou"></i>
                </a>
            </div>
            <div class="dynamic-img clearfix">
                <img v-lazy="dynamicItem.imgUrl" v-for="(dynamicItem,index) in dynamicList" :key="dynamicItem.id">
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            dynamicList:[
                {
                    id:1,
                    imgUrl:"./images/dynamic-p1.jpg"
                },
                {
                    id:2,
                    imgUrl:"./images/dynamic-p2.jpg"
                },
                {
                    id:3,
                    imgUrl:"./images/dynamic-p3.jpg"
                },
                {
                    id:4,
                    imgUrl:"./images/dynamic-p4.jpg"
                },
            ]
        }
    },
    computed:{
        ...mapState("user",["userInfo"])
    }
};
</script>

<style scoped>
.main{
    width: 1040px;
    background-color: rgba(255, 255, 255, .8);
    float: left;
    margin-left: 10px;
}

/*设置资料卡的样式*/
.main .data-card{
    border: 2px solid rgba(91,81,69,.4);
    margin: 10px;
    user-select: none;
}

/*设置头像的样式*/
.data-card .card-portrait{
    width: 150px;
    height: 150px;
    border-radius: 25%;
    margin: 30px 50px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
}

/*设置资料内容的样式*/
.data-card .message{
    float: right;
    margin-top: 30px;
    font-size: 14px;
    line-height: 40px;
}

/*设置资料信息部分的样式*/
.data-card .message > li{
    margin-right: 300px;
}
/*设置label的大小让具体内容左对齐*/
.data-card .message li .label{
    width: 80px;
    height: 40px;
}
/*设置label右边信息的宽度*/
.data-card .message .content{
    width: 300px;
}

.data-card .message .card-signature{
    height: 80px;
}

.data-card .message .content,
.data-card .message .label{
    float: left;
}

/*以下是设置最近动态的样式*/
.main .dynamic-wrapper{
    margin: 30px 10px;
}

/*调整最近动态头部的样式*/
.dynamic-wrapper .head-tape{
    font-size: 20px;
    line-height: 30px;
    height: 34px;
    margin-bottom: 10px;
}

.head-tape .dynamic{
    float: left;
}

.head-tape .icon-dongtai{
    font-size: 30px;
    margin-right: 15px;
}

.head-tape .link{
    float: right;
}

.head-tape .link .icon-jiantou{
    margin-left: 15px;
}
.head-tape .link:hover{
    color: #f30213;
}
/*调整最近动态图片的样式*/
.dynamic-wrapper .dynamic-img{
    display: flex;
    justify-content: flex-start;
}

.dynamic-img img{
    width: 230px;
    height: 230px;
    margin-left: 15px;
    object-fit: cover;
}
</style>